<template>
  <a-layout>
    <a-layout-sider style="background: #fff" v-model:collapsed="Side.collapsed" :trigger="null">
      <div class="logo" v-if="!Side.collapsed"></div>
      <a-menu theme="dark" v-model:selected-keys="Side.selectedKeys"
              v-model:open-keys="Side.openKeys"
              style="height: 100%;border-right: 0"
              :items="Side.items" mode="inline"
              :inline-collapsed="Side.collapsed"
      ></a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <menu-unfold-outlined
          v-if="Side.collapsed"
          class="trigger"
          @click="() => (Side.collapsed = !Side.collapsed)"
        />
        <menu-fold-outlined v-else class="trigger" @click="() => (Side.collapsed = !Side.collapsed)" />
      </a-layout-header>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb>

        </a-breadcrumb>
        <a-layout-content :style="{ background: '#fff', padding: '24px', margin: '0', minHeight: '91.4vh' }">
          <slot></slot>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script setup lang="ts">
import { MenuFoldOutlined, MenuUnfoldOutlined, PieChartOutlined, UsbOutlined } from "@ant-design/icons-vue";
import Router from "@/router";

const Side = (() => {
  const setWatcher = () => {
    watch(() => s.selectedKeys, () => {
      const path = s.items.find(item =>s.selectedKeys.includes(item.key))?.path;
      Router.push({ path });
    }, { deep: true });
  }
  const s = reactive({
    collapsed: false,
    selectedKeys: [],
    openKeys: [],
    items:[
      {
        key: 1,
        icon: () => h(PieChartOutlined),
        label: "项目管理",
        path: "projectMana"
      }, {
        key: 2,
        icon: () => h(UsbOutlined),
        label: "运维管理",
      }
    ]
  });
  setWatcher()
  return s;
})();
</script>
<style scoped>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.logo {
  width: 200px;
  height: 146px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("@/assets/madohomu.gif");
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>